<template>
	<view class="mypopup" v-if="modelValue">
		<view class="mask" @click="close"></view>
		<view class="content">
			<view class="top">
				<view>欢迎咨询学历提升</view>
				<view>请填写个人资料</view>
			</view>
			<view class="row">
				<view class="key require">姓名: </view>
				<input placeholder="请输入姓名" v-model="form.name"/>
			</view>
			<view class="row"> 
				<view class="key require">手机号: </view>
				<input type="number" v-model="form.phone" placeholder="请输入您的手机号"/>
				<view></view>
			</view>
			<view class="row">
				<view class="key requirenull">&nbsp;&nbsp;当前学历: </view>
			·· 	<input placeholder="请输入当前学历"/>
			</view>
			<view class="confirm" @click="commit">提交信息</view>
		</view>
	</view>
</template>

<script setup>
	import {defineEmits, defineProps, reactive, computed} from 'vue'
	
	const props = defineProps(['modelValue'])
	const emits = defineEmits('update:modelValue')
	
	const close = ()=> {
		emits('update:modelValue', false)
	}
	
	const form = reactive({
		phone: '',
		name: '',
		currentQualification: ''
	})
	
	 
	function commit(){
		if(!form.name){
			uni.showToast({
				title: '请填写姓名',
				icon: 'none'
			})
			return false;
		}
		if(!(/^1[3-9]\d{9}$/.test(form.phone))){
			uni.showToast({
				title: '请填写正确的手机号',
				icon: 'none'
			})
		}
	}
	const allowCommit = computed(()=> {
		return /^1[3-9]\d{9}$/.test(form.phone) && form.name
	})
</script>

<style lang="scss" scoped>
	.mypopup{
		position: fixed;
		z-index: 999;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.5);
		.mask{
			height: 40vh;
			width: 100vw;
		}
		.content{
			background: #f7f7f7;
			height: 60vh;
			border-radius: 20rpx 20rpx 0 0 ;
			overflow: hidden;
			padding: 50rpx 30rpx 0 30rpx;
			.top{
				margin-bottom: 30rpx;
				view{
					&:nth-child(1){
						font-weight: bold;
						font-size: 36rpx;
					}
					&:nth-child(2){
						font-size: 28rpx;
						color: #5a5a5a;
						font-weight: 300;
						margin-top: 10rpx;
					}
				}
			}
			.row{
				height: 100rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #ededed;
				.key{
					width: 150rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
				.require{
					&:before{
						content: '*';
						color: red;
						display: inline;
					}
				}
				
				input{
					margin-left: 50rpx;
					flex: 1;
				}
			}
			.confirm{
				background: #5985D0;
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
				border-radius: 50rpx;
				margin-top: 100rpx;
			}
			
		}
	}
</style>